<script lang="ts" setup>
import { reactive } from "vue";
import { useRouter } from "vue-router";
import { UserOutlined, LockOutlined } from "@ant-design/icons-vue";

import { useAppStore } from "@/store/modules/app";
import { message } from "ant-design-vue";
const appStore = useAppStore();
const { push } = useRouter();

const formState = reactive({
  // loginUser: "",
  // loginPswd: "",
	loginUser: "user",
  loginPswd: "user#123456",
});

const onFinish = (values: any) => {
  let { loginUser, loginPswd } = values;
  if (!loginUser) {
    message.warn("请输入账号");
    return;
  }
  if (!loginPswd) {
    message.warn("请输入密码");
    return;
  }
  if (!loginPswd.trim()) {
    message.warn("请输入正确的密码");
    return;
  }
  let params = {
    loginUser,
    loginPswd,
  };
  appStore.login(params).then((res: any) => {
    console.log("res", res);
    if (res?.code == 200) {
      push({
        path: "/dashboard/analysis",
      });
    }
  });
};

const handleLogin = (type: string) => {
  let showArr = ["qrcode", "github", "qywechat", "dingding", "wechat"];
  if (showArr.indexOf(type) != -1) {
    message.info("努力开发中，敬请期待~");
  }
};
</script>

<template>
  <div class="hull-container">
    <!-- <div class="container"> -->
    <img src="@/assets/imgs/logo.png" class="logo" />
    <div class="box flex justify-between">
      <div class="box-left flex flex-col items-center">
        <div class="title ysbth text-5xl text-white text-white mb-10">Develop Design</div>
        <div class="desc wryh text-xl text-center text-white mb-2 font-thin">是模仿Jeccg Boot的 企业级低代码平台！</div>
        <div class="desc wryh text-xl text-center text-white font-thin">在线开发，可视化拖拉拽设计零代码实现80%的基础功能~</div>
      </div>
      <div class="box-right flex flex-col items-center">
        <div class="title text-center mt-5 mb-5 text-xl w-100%">登录</div>
        <a-form class="login-form w-100%" :model="formState" autocomplete="off" @finish="onFinish">
          <a-form-item name="loginUser">
            <a-input v-model:value="formState.loginUser" :bordered="false" placeholder="账号" allow-clear>
              <template #prefix>
                <user-outlined />
              </template>
            </a-input>
          </a-form-item>
          <a-form-item name="loginPswd">
            <a-input-password v-model:value="formState.loginPswd" :bordered="false" placeholder="密码">
              <template #prefix>
                <lock-outlined />
              </template>
            </a-input-password>
          </a-form-item>
          <div class="mb-10px text-xs color-primary">
            用户名: user 密码: user#123456
          </div>
          <a-form-item class="btns">
            <a-button class="w-100% mb-2" type="primary" html-type="submit">登录</a-button>
            <a-button class="w-100%" @click="handleLogin('qrcode')">二维码登录</a-button>
          </a-form-item>
        </a-form>
        <a-divider :plain="true">其他登录方式</a-divider>
        <div class="other-login">
          <i class="iconfont icon-github-fill" title="github" @click="handleLogin('github')"></i>
          <i class="iconfont icon-qiyeweixin" title="企业微信" @click="handleLogin('qywechat')"></i>
          <i class="iconfont icon-dingding-fill" title="钉钉" @click="handleLogin('dingding')"></i>
          <i class="iconfont icon-wechat-fill" title="微信" @click="handleLogin('wechat')"></i>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.hull-container {
  background-image: url("@/assets/imgs/login/bg.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 0 0;
  position: relative;

  .logo {
    position: absolute;
    left: 10vw;
    top: 5vh;

    width: 200px;
  }

  .box {
    max-width: 1000px;
    margin: 0 auto;
    box-shadow: 0 4px 8px 1px #0003;
    position: fixed;
    top: 50%;
    left: 50%;
    width: 92%;
    height: auto;
    box-sizing: border-box;
    transform: translate(-50%, -50%);
    background-color: #fff;

    .box-left {
      background-color: #0198cd;
      background-image: url("@/assets/imgs/login/login-form-bg.png");
      background-repeat: no-repeat;
      background-size: cover;
      background-position: 0 0;
      padding: 180px 50px;
      box-sizing: border-box;
    }

    .box-right {
      padding: 30px 40px;
      background: #fff;
      box-sizing: border-box;

      .login-form {
        min-width: 300px;
      }
    }
  }

  .other-login {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    box-sizing: border-box;
    padding: 0 10px;
    margin-top: 20px;

    .iconfont {
      color: #888;
      font-size: 22px;
      cursor: pointer;
      &:hover {
        color: #1677ff;
      }
    }
  }
}

:deep(.ant-row.ant-form-item-row) {
  border-bottom: 1px solid #ccc;

  &:hover,
  &:active {
    border-bottom: 1px solid #1b90ff;
  }
}

:deep(.btns .ant-row.ant-form-item-row) {
  border-bottom: none;
}

:deep(.ant-divider-with-text) {
  color: #afafaf;

  &::before {
    border-color: #d9d9d9;
  }

  &::after {
    border-color: #d9d9d9;
  }
}

@media (max-width: 1024px) {
  .hull-container {
    .logo {
      left: 2vw;
      top: 2vw;
      width: 15vw;
      min-width: 100px;
    }
  }
}

@media (max-width: 768px) {
  .hull-container {
    .box-left {
      display: none;
    }
    .box-right {
      flex: 1;
    }
  }
}
</style>